<template>
    <view class="wrapper">
        <view class="items" v-for="(item, idx) in list" :key="item.id">
            <view class="u-flex u-row-between u-col-center order-top">
                <view class="order-No">订单号：{{ item.id }}</view>
                <view class="order-status" v-if="[1, 2].indexOf(item.refundStatus) == -1">
                    <text style="color: #2879fe" v-if="item.status == 0">待审核</text>
                    <text style="color: #fc4f75" v-if="item.status == 1">待付款</text>
                    <text style="color: #2879fe" v-if="item.status == 2">待财务审核</text>
                    <text style="color: #ff9900" v-if="item.status == 3">待发货</text>
                    <text style="color: #ff9900" v-if="item.status == 4">待收货</text>
                    <text v-if="item.status == 5">已完成</text>
                    <text style="color: #999999" v-if="item.status == 6">交易关闭</text>
                    <text style="color: #999999" v-if="item.status == 7">交易取消</text>
                </view>
                <view class="refund-status" v-if="[1, 2].indexOf(item.refundStatus) > -1">
                    <text v-if="item.refundStatus === 1">退款中</text>
                    <text v-if="item.refundStatus === 2">退款完成</text>
                </view>
            </view>
            <view class="items-innerBox" v-if="!item.open">
                <view v-for="(sub, index) in item.skus" class="order-item" :key="sub.uuid">
                    <view class="u-flex">
                        <img-cache :src="`${global.productImageUrl}${sub.picId}/1`" width="150" height="150" borderRadius="20" style="flex-shrink: 0"></img-cache>
                        <view class="goods-name">
                            <view class="">{{ sub.name }}</view>
                            <view class="subtotal-text u-flex u-row-between u-col-center" v-if="item.skus.length > 1">
                                <text>X {{ sub.num }}</text>
                                <text>小计：￥{{ Number(sub.total).toFixed(2) }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="u-flex u-row-between u-col-center item-info">
                    <text class="item-info-count">共 {{ item.totalNum }} 件</text>
                    <view v-if="item.amountPrice" class="amount">
                        <text>已优惠</text>
                        <text>￥{{ Number(item.amountPrice).toFixed(2) }}</text>
                    </view>
                    <text class="acture-pay">实付：￥{{ item.payPrice }}</text>
                </view>
                <!-- 展开按钮 -->
                <view class="fold-wrapper" @click.stop="fold(item)" v-if="item.type == 0">
                    <text>展开</text>
                    <u-icon name="arrow-down"></u-icon>
                </view>
            </view>
            <!-- 折叠展开的样子 -->
            <view class="fold-open" v-if="item.open">
                <view v-for="(model, index) in orders[item.id]" :key="item.id + '' + index">
                    <view v-for="(subItem, key) of model" :key="index">
                        <view class="order-items">
                            <view class="wrapper-1">
                                <view class="good-title u-line-2">{{ subItem.name }}</view>
                            </view>
                            <view class="summary">
                                <text class="">数量：{{ subItem.subCount }}件</text>
                                <text class="">小计：￥{{ Number(subItem.subPrice).toFixed(2) }}</text>
                            </view>
                        </view>
                        <view class="skus">
                            <template v-for="(itm, idx) in (Object.values(subItem.children) as Array<any>)">
                                <view class="skus-items-wrapper">
                                    <view class="skus-items">
                                        <view class="sku-content">
                                            <!-- 规格 图 -->
                                            <view class="left">
                                                <view class="checkAndImg">
                                                    <view style="width: 30rpx"></view>
                                                    <view class="image-wrapper" @click="showGoodsDtl(itm)">
                                                        <img-cache v-show="itm.picId" class="model-img" :src="itm.picId ? `${global.productImageUrl}${itm.picId}/1` : `/static/images/placeholder.png`" width="150" height="150" border-radius="10" />
                                                    </view>
                                                </view>
                                                <view class="sku-content-value">
                                                    <view class="collarName" v-if="itm.collarName != '无领'">{{ itm.collarName }}</view>
                                                    <view class="colorName">{{ itm.colorName }}</view>
                                                    <view class="price">单价 ￥{{ itm.userPrice }}</view>
                                                </view>
                                            </view>
                                            <view class="vertical-line"></view>
                                            <!-- 右侧信息 -->
                                            <view class="right-part">
                                                <view v-for="(innerItem, i) in itm.list" :key="innerItem.id">
                                                    <view class="right-part-line2">
                                                        <view class="sub-text">
                                                            <text class="skus-items-size">{{ innerItem.sizeName || '空' }}</text>
                                                        </view>
                                                        <view>x{{ innerItem.num }}</view>
                                                    </view>
                                                    <view class="borderBottom" v-if="i + 1 != itm.list.length"></view>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </template>
                        </view>
                        <holder v-if="orders[item.id].length > 1 && index != orders[item.id].length - 1" height="20rpx"></holder>
                    </view>
                </view>
                <view class="bottom-button-bar order-wrapper-bottom">
                    <view class="u-flex u-row-between u-col-center item-info">
                        <text class="item-info-count">共 {{ item.totalNum }} 件</text>
                        <view v-if="item.amountPrice" class="amount">
                            <text>已优惠</text>
                            <text>￥{{ Number(item.amountPrice).toFixed(2) }}</text>
                        </view>
                        <text class="acture-pay">实付：￥{{ item.payPrice }}</text>
                    </view>
                </view>
                <!-- 收起按钮 -->
                <view class="fold-wrapper" @click.stop="pickup(item)">
                    <text>收起</text>
                    <u-icon name="arrow-up"></u-icon>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import global from '@/config'
import { computed } from 'vue'
import { useOrderStore } from '@/store'

withDefaults(defineProps<{ list: Array<any> }>(), {
    list: () => []
})

const orderStore = useOrderStore()

const orders = computed(() => {
    return orderStore.orders
})

function fold(item: any) {
    item.open = true
    let id = item.id
    if (orders.value[id]) {
        console.log('存在缓存')
        // this.$forceUpdate(); TODO
        return
    }
    console.log('没有缓存,开始处理数据')
    // 点击展开面板时才计算 4维数据
    let list = item.skus
    // 建立一个对象
    let data = { id, list: [] as Array<any> }
    for (let temp of list) {
        let good: any = {}
        temp.sku.forEach((sku: any) => {
            let label = sku.specificationsCollarId
            // 抽出一个数组 存放这个款型的所有sku
            let arr = temp.sku.filter((m: any) => m.specificationsCollarId == sku.specificationsCollarId)

            if (!good[label]) {
                good[label] = {}
                good[label].name = sku.goodsName
                good[label].collarName = sku.collarName
                good[label].modelNo = sku.modelNo
                good[label].releaseId = sku.releaseId
                good[label].collarText = sku.collarText || '领型'
                good[label].spuId = sku.spuId
                good[label].unid = uni.$u.guid(6)
                good[label].specificationsCollarId = sku.specificationsCollarId
                good[label].subPrice = arr
                    .map((mm: any) => mm.totalPrice)
                    .reduce((pre: number, current: number) => {
                        return pre + current
                    })
                good[label].subCount = arr
                    .map((mm: any) => mm.num)
                    .reduce((pre: number, current: number) => {
                        return pre + current
                    })
                good[label].children = {}
            }
            let child = good[label].children
            if (!child[sku.colorName]) {
                child[sku.colorName] = {}
                child[sku.colorName].picId = sku.picId
                child[sku.colorName].userPrice = sku.singlePrice
                child[sku.colorName].colorName = sku.colorName
                child[sku.colorName].collarName = sku.collarName
                child[sku.colorName].modelNo = sku.modelNo
                child[sku.colorName].releaseId = sku.releaseId
                child[sku.colorName].unid = uni.$u.guid(4)
                child[sku.colorName].list = []
            }
            child[sku.colorName].list.push(sku)
        })
        data.list.push(good)
    }
    orderStore.addDealedData2Cache(data)
}

/**跳转商品详情 */
function showGoodsDtl({ releaseId }: { releaseId: string | number }) {
    uni.$u.$MRouter.details.to({ id: releaseId })
}

function pickup(item: any) {
    item.open = false
    // this.$forceUpdate();
}
</script>

<style scoped lang="scss">
.wrapper {
    .items {
        margin-bottom: 20rpx;
        border-radius: 20rpx;
        .items-innerBox {
            background-color: white;
            padding: 20rpx;
            border-radius: 20rpx;
            position: relative;
            .order-item {
                margin-top: 20rpx;
                .goods-name {
                    margin-left: 20rpx;
                    padding: 20rpx 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    flex: 1;
                    .subtotal-text {
                        color: #999;
                        font-size: 24rpx;
                        text-align: right;
                    }
                }
            }
            .amount {
                width: 260rpx;
                height: 40rpx;
                background-image: url(@/static/icon/10011.png);
                background-size: 260rpx 40rpx;
                background-repeat: no-repeat;
                line-height: 40rpx;
                font-size: 24rpx;
                color: #ce7f63;
                display: flex;
                justify-content: space-around;
            }
        }
    }
    .fold-open {
        background-color: white;
        border-radius: 0 0 20rpx 20rpx;
    }
}
.order-top {
    padding: 30rpx;
    background-color: white;
    border-radius: 20rpx 20rpx 0 0;
    padding-bottom: 20rpx;
    .order-No {
        font-size: 32rpx;
    }
    .order-status {
        text-align: center;
    }
    .refund-status {
        color: #ff9900;
    }
}
.order-items {
    padding-bottom: 30rpx;
    background-color: white;
    border-bottom: 1rpx solid #f5f5f5;
    .wrapper-1 {
        display: flex;
        align-items: center;
        padding: 20rpx 30rpx;
        padding-left: 30rpx;

        .good-title {
            color: #333;
            line-height: 50rpx;
            font-size: 30rpx;
            flex: 1;
            letter-spacing: 3rpx;
        }
    }
}
.skus {
    background-color: white;
    overflow: hidden;
    transition: height 0.4s;
    .skus-items {
        border-bottom: 1rpx solid #e6e6e6;
        line-height: 50rpx;
        padding: 20rpx 0rpx;
        display: flex;
        align-items: center;
        .sku-content {
            display: flex;
            flex: 1;
            padding-right: 20rpx;
            .left {
                padding-right: 30rpx;
                display: flex;
                align-items: center;
                .checkAndImg {
                    display: flex;
                    align-items: center;
                    padding: 30rpx 0;
                    .model-img {
                        box-shadow: 1px 2px 2px 0px rgba(24, 14, 11, 0.14), 6px 7px 3px 0px rgba(24, 14, 11, 0.09), 12px 14px 5px 0px rgba(24, 14, 11, 0.07);
                    }
                }
                .sku-content-value {
                    text-align: center;
                    margin-left: 30rpx;
                    margin-right: 10rpx;
                    line-height: 60rpx;
                    .colorName,
                    .collarName {
                        font-size: 30rpx;
                        letter-spacing: 4rpx;
                    }
                    .collarName {
                        font-weight: bold;
                        font-size: 34rpx;
                    }
                    .price {
                        color: #fc4f75;
                        font-size: 28rpx;
                    }
                }
            }
            .vertical-line {
                width: 1px;
                background-color: #f8f8f8;
            }
            .right-part {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .right-part-line2 {
                    display: flex;
                    justify-content: space-between;
                    margin: 0 20rpx;
                    flex: 1;
                    padding: 10rpx 0;
                    color: #b5b5b5;
                    &:last-child {
                        border: none;
                    }
                }
                .borderBottom {
                    height: 1px;
                    margin-left: 20rpx;
                    background-color: #f8f8f8;
                }
            }
        }

        .skus-items-size {
            font-size: 28rpx;
            margin-left: 20rpx;
            margin-right: 20rpx;
            min-width: 50rpx;
        }
    }
}
.order-wrapper-bottom {
    background-color: white;
    padding: 0 20rpx;
    border-radius: 0 0 20rpx 20rpx;
}

.skus-items-wrapper:nth-child(even) {
    background-color: #ececec;
    .vertical-line {
        background: #d6d6d6 !important;
    }
    .borderBottom {
        background-color: #e2e2e2 !important;
    }
}
.skus-items-wrapper:nth-child(odd) {
    background-color: white;
}
.fold-wrapper {
    text-align: center;
    padding: 20rpx 0;
    color: #999;
    & > text {
        margin-right: 10rpx;
        font-size: 24rpx;
    }
}
.summary {
    color: #999;
    margin-left: 30rpx;
    & > text:nth-child(2) {
        margin-left: 30rpx;
    }
}
.item-info {
    line-height: 60rpx;
    .item-info-count {
        min-width: 150rpx;
        text-align: center;
        display: inline-block;
    }
    .acture-pay {
        font-weight: bold;
    }
}
</style>
